<template>
  <div class="scroll_box">
    <div class="tab_scroll" border="0">
      <!-- 设置列宽 -->
      <div
        :style="{
          minWidth: item.width,
          maxWidth: item.width,
          background: '#263050'
        }"
        v-for="(item, index) in tabData"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <vue-seamless-scroll
      :class-option="defaultOption"
      :data="taskList"
      class="seamless-warp"
      v-if="taskList.length"
    >
      <div
        v-for="(item, index) in taskList"
        :key="index"
        class="liStyle"
        :class="index % 2 == 0 ? '' : 'light'"
      >
        <!-- <div
          class="title text_align index_width"
          :style="{ minWidth: '6%', maxWidth: '6%' }"
        >
          {{ item.index }}
        </div> -->
        <div
          class="title text_align"
          :style="{ minWidth: '10%', maxWidth: '10%' }"
        >
          {{ item.batchNumber }}
        </div>
        <div
          class="title text_align"
          :style="{ minWidth: '26%', maxWidth: '26%' }"
        >
          {{ item.partNumber }}
        </div>
        <div
          class="title text_align"
          :style="{ minWidth: '12%', maxWidth: '12%' }"
        >
          {{ item.partName }}
        </div>
        <div
          class="title text_align"
          :style="{ minWidth: '8%', maxWidth: '8%' }"
        >
          {{ item.processNumber }}
        </div>
        <div
          class="title text_align"
          :style="{ minWidth: '12%', maxWidth: '12%' }"
        >
          {{ item.processName }}
        </div>
        <div
          class="title text_align"
          :style="{ minWidth: '12%', maxWidth: '12%' }"
        >
          {{ item.manufactureSite }}
        </div>
        <div
          class="title text_align"
          :style="{ minWidth: '12%', maxWidth: '12%' }"
        >
          {{ item.deviceToken }}
        </div>
        <div
          class="title text_align"
          :style="{ minWidth: '8%', maxWidth: '8%' }"
        >
          {{ item.partTotalCount }}
        </div>
      </div>
    </vue-seamless-scroll>
    <div v-else class="message flex-y flex-center">暂无数据</div>
  </div>
</template>

<script>
function formatTime(time, fmt) {
  if (!time) return "";
  else {
    const date = new Date(time);
    const o = {
      "M+": date.getMonth() + 1,
      "d+": date.getDate(),
      "H+": date.getHours(),
      "m+": date.getMinutes(),
      "s+": date.getSeconds(),
      "q+": Math.floor((date.getMonth() + 3) / 3),
      S: date.getMilliseconds()
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    for (const k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1
            ? o[k]
            : ("00" + o[k]).substr(("" + o[k]).length)
        );
      }
    }
    return fmt;
  }
}
import vueSeamlessScroll from "vue-seamless-scroll";
import Scanning from "./scanning.vue";
import { TENANT_TITLE } from "@/utils/local";

export default {
  props: {
    taskList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ],
      tabData: [
        // {
        //   name: "序号",
        //   width: "6%"
        // },
        {
          name: "批次号",
          width: "10%"
        },
        {
          name: "零件号",
          width: "26%"
        },
        {
          name: "零件名称",
          width: "12%"
        },
        {
          name: "工序号",
          width: "8%"
        },
        {
          name: "工序名称",
          width: "12%"
        },
        {
          name: "制造单元",
          width: "12%"
        },

        {
          name: "设备编号",
          width: "12%"
        },
        {
          name: "数量",
          width: "8%"
        }
      ]
    };
  },
  components: {
    vueSeamlessScroll,
    Scanning
  },
  computed: {
    useTbaleTitle() {
      const { name } = this.$store.getters.tenant;
      switch (name) {
        case TENANT_TITLE[0]:
          return ["热处理", "热处理", "热处理"];
        case TENANT_TITLE[1]:
          return ["模锻", "自由锻", "热处理"];
        case TENANT_TITLE[2]:
          return ["型芯", "型壳", "热处理"];
        default:
          return ["热处理", "热处理", "热处理"];
      }
    },
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.testArray = [
    //     {
    //       batchNumber: "w23",
    //       partNumber: 14,
    //       partName: "高蜗轮盘",
    //       processNumber: "热表",
    //       processName: "1",
    //       manufactureSite: "liStyle1",
    //       token: "110",
    //       partTotalNumber: "500"
    //     },
    //     {
    //       batchNumber: "w23",
    //       partNumber: 14,
    //       partName: "高蜗轮盘",
    //       processNumber: "热表",
    //       processName: "1",
    //       manufactureSite: "liStyle1",
    //       token: "110",
    //       partTotalNumber: "500"
    //     }
    //   ];
    //   let a = 0;
    //   for (let index = 0; index < 30; index++) {
    //     if (a > 2) a = 0;
    //     const n = [1, 3, 4, 6, 11];
    //     const obj = {
    //       batchNumber: index + "222",
    //       partNumber: index + "133",
    //       partName: "高蜗轮盘",
    //       processName: "w23",
    //       processNumber: 14,
    //       ljname: "高蜗轮盘",
    //       manufactureSite: this.useTbaleTitle[a],
    //       token: "110px",
    //       partTotalNumber: "133" + index,
    //       bgc: n.includes(index) ? "liStyle1" : ""
    //     };
    //     a++;
    //     this.testArray.push(obj);
    //   }
    // });
    this.timeFn();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.scroll_box {
  height: 100%;
  padding: 0 20px;
  .message {
    height: 80%;
    // background: red;
    text-align: center;
    width: 100%;
    color: #bcdbe9;
    font-size: 14px;
  }
  .tab_scroll {
    /* margin-top: 20px; */
    display: flex;
    div {
      color: #bcdbe9;
      &:first-child {
        border-left: 0;
      }
      padding-left: 10px;
      min-width: 80px;
      max-width: 80px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      text-align: left;
      /* background-color: rgba(180, 181, 198, 0.1); */
    }
  }
  .seamless-warp {
    height: 93%;
    //  height: 150px;
    overflow: hidden;
    .liStyle1 {
      background-color: rgba(0, 172, 63, 0.3);
    }
    .liStyle2 {
      background-color: rgba(80, 28, 108, 0.3);
    }
    /deep/ .el-progress path:first-child {
      // 修改进度条背景色
      stroke: #091224;
    }
    /deep/ .el-progress__text {
      // 修改进度条文字提示颜色
      color: #bcdbe9;
    }
    .liStyle {
      line-height: 30px;
      width: 100%;
      display: flex; //设置flex布局，否则span标签无法设置宽度

      //设置宽度与表头列宽一致
      .title {
        &:first-child {
          border-left: 0;
        }
        color: #bcdbe9;
        // min-width: 80px;
        // max-width: 80px;
        height: 30px;
        line-height: 30px;
        @include textoverflow(1);

        font-size: 14px;
      }
      .title.progress_width {
        padding-left: 10px;
        /deep/ .el-progress {
          line-height: inherit;
          .el-progress-bar__outer {
            height: 16px !important;
            background-color: transparent;
            /* line-height: 30px; */
          }
        }
      }
      .text_align {
        text-align: left;
        padding-left: 10px;
      }
    }
  }
}

.flex {
  display: flex;
  align-items: center;
}
.font14 {
  font-size: 14px;
}
.light {
  background: #263050;
}
</style>
